@use '@scss/common' as *;

.accordion {
  border: 1px solid var(--theme-border-color);
  color: var(--theme-text);
}

.toggler {
  cursor: pointer;
  line-height: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  outline: none;
  border: none;
  background-color: var(--theme-elevation-50);
  padding: var(--base);
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  &[aria-expanded='true'] {
    &:local() {
      .icon-eye {
        svg [data-show] {
          display: none;
        }

        svg [data-hidden] {
          display: initial;
        }
      }

      .icon--chevron {
        svg {
          transform: rotate(-90deg);
        }
      }
    }
  }
}

:global([data-theme='dark']) {
  .toggler {
    background-color: var(--theme-elevation-100);

    &:hover {
      background-color: var(--theme-elevation-150);
    }
  }
}

.labelContent {
  font-size: 18px;
  margin: 0;
  display: flex;
  gap: 1rem;
  align-items: center;

  * {
    margin: 0;
  }
}

.icon {
  line-height: 1;
  border-radius: 3px;
  height: 30px;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover,
  &:focus-visible {
    background-color: var(--theme-elevation-200);
  }

  &:focus-visible {
    @include outline;
  }

  &.icon--chevron {
    svg {
      transform: rotate(90deg);
    }
  }

  &.icon--eye {
    svg [data-show] {
      display: initial;
    }

    svg [data-hidden] {
      display: none;
    }
  }
}

.collapsibleContent {
  padding: 1rem;
  border-top: 1px solid var(--theme-border-color);
}
